<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单处理事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 去除默认边距和间距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
        }

        #loginBox {
            background-color: #663399;
            color: white;
            border-radius: 8px;
            padding: 20px;
            width: 400px;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            cursor: move;
        }

        #loginForm {
            text-align: center;
            width: 100%;
        }

        label {
            display: block;
            margin: 5px 0;
            font-size: 16px;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        input[type="submit"],
        input[type="reset"] {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            background-color: #663399;
            margin-top: 10px;
        }

        input[type="submit"]:hover,
        input[type="reset"]:hover {
            background-color: #4c2e75;
        }

        /* 可伸缩的角样式 */
        .resize-handle {
            width: 10px;
            height: 10px;
            background-color: white;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: se-resize;
        }
    </style>
</head>

<body>
    <fieldset id="loginBox">
        <legend style="color: white; font-size: 20px;">用户登录</legend>
        <form id="loginForm">
            <label for="username">用户名</label>
            <input type="text" id="username" />
            <label for="password">密码</label>
            <input type="password" id="password" />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
        <div class="resize-handle"></div>
    </fieldset>

    <script>
        const loginBox = document.getElementById('loginBox');
        const resizeHandle = document.querySelector('.resize-handle');
        let isResizing = false;
        let startX, startY;

        // 鼠标按下事件，开始伸缩
        resizeHandle.addEventListener('mousedown', (e) => {
            isResizing = true;
            startX = e.pageX;
            startY = e.pageY;
        });

        // 鼠标移动事件，改变大小
        document.addEventListener('mousemove', (e) => {
            if (isResizing) {
                const newWidth = Math.max(
                    loginBox.offsetWidth + (e.pageX - startX),
                    300
                );
                const newHeight = Math.max(
                    loginBox.offsetHeight + (e.pageY - startY),
                    200
                );
                loginBox.style.width = `${newWidth}px`;
                loginBox.style.height = `${newHeight}px`;
                startX = e.pageX;
                startY = e.pageY;
            }
        });

        // 鼠标松开事件，结束伸缩
        document.addEventListener('mouseup', () => {
            isResizing = false;
        });

        let isDragging = false;
        let dragStartX, dragStartY;

        // 鼠标按下事件，开始拖动
        loginBox.addEventListener('mousedown', (e) => {
            if (!isResizing) {
                isDragging = true;
                dragStartX = e.pageX - parseFloat(window.getComputedStyle(loginBox).left);
                dragStartY = e.pageY - parseFloat(window.getComputedStyle(loginBox).top);
            }
        });

        // 鼠标移动事件，进行拖动
        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                const x = e.pageX - dragStartX;
                const y = e.pageY - dragStartY;
                loginBox.style.left = `${x}px`;
                loginBox.style.top = `${y}px`;
            }
        });

        // 鼠标松开事件，结束拖动
        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        const form = document.getElementById('loginForm');
        form.addEventListener('submit', function (event) {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            let isValid = true;

            if (username === '') {
                alert('用户名不能为空');
                document.getElementById('username').focus();
                isValid = false;
            } else if (username.length < 8 || username.length > 20) {
                alert('用户名长度需在8到20个字符之间');
                document.getElementById('username').focus();
                isValid = false;
            }

            if (password === '') {
                alert('密码不能为空');
                document.getElementById('password').focus();
                isValid = false;
            } else if (password.length < 8 || password.length > 20) {
                alert('密码长度需在8到20个字符之间');
                document.getElementById('password').focus();
                isValid = false;
            }

            if (!isValid) {
                event.preventDefault();
            }
        });
    </script>
</body>
</html>
